<template>
    <layout>
        <div class="hot_pic">
            <div class="header_title">
                <div class="header_left">
                    <a href="/study/homework">
                        <p><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/icon_home_work.png" /></p>
                        <p>作业</p>
                    </a>
                </div>
                <div class="header_right">
                    <a>
                        <p><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/icon_statistics.png" /></p>
                        <p>统计</p>
                    </a>
                </div>
            </div>
            <div class="top-box">
                <div>
                    <img class="banner_img" src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/banner.png" />
                </div>
                <div class="flex-box">
                    <div @click="selectCourse(1)">
                        <span class="img_mark"><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/icon_error_subject.png" ></span>
                        <p class="zhuanxian">专项巩固</p>
                        <p>攻击自己的弱项</p>
                        <p>提高成绩不是梦</p>
                    </div>
                    <div @click="selectCourse(2)">
                        <span class="img_mark"><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/icon_error_subject.png" /></span>
                        <p class="zhuanxian">普遍错题</p>
                        <p>哪些题容易出错</p>
                        <p>别人错时我要对</p>
                    </div>
                    <div @click="selectCourse(3)">
                        <span class="img_mark"><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/icon_error_subject.png" /></span>
                        <p class="zhuanxian">个人错题</p>
                        <p>洞察自己的错题</p>
                        <p>准确无误的将它消灭</p>
                    </div>
                    <div @click="selectCourse(4)">
                        <span class="img_mark"><img src="http://weidian-test.oss-cn-shenzhen.aliyuncs.com/edu/img/icon_error_subject.png" /></span>
                        <p class="zhuanxian">随机巩固</p>
                        <p>让毛笔随机考考你</p>
                        <p>高手一般都是全对</p>
                    </div>
                </div>
                <div class="lianxi"><a href="study/practice/history">练习历史</a></div>
            </div>

            <mt-popup
                class="study-popup"
                v-model="popupVisible"
                position="bottom">
                <div class="con">
                    <div>选择练习科目</div>
                    <ul>
                        <li v-for="item in course"><a :href="'/study/knowledge?courseId='+item.courseId+'&type='+type">{{ item.courseName }}</a></li>
                    </ul>
                    <mt-button class="button" size="large" @click="popupVisible = false">取消</mt-button>
                </div>
            </mt-popup>

        </div>


    </layout>
</template>
<style lang="scss">
    @import "index.scss";

</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                popupVisible: false,
                courseId: '',
                type: ''
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        methods: {
            selectCourse(type){
                this.type = type;
                this.popupVisible = true;
            }
        },
        mounted() {
        }
    }
</script>

